<!--
 * @Descripttion: 表格组件封装，基于vxe-table@2.9.16、vxe-table-plugin-element@1.9.1、xe-utils@2.7.5
 * @version: V2.0
 * @Author: 34786
 * @Date: 2020-08-10 17:10:52
 * @LastEditors: 34786
 * @LastEditTime: 2021-07-12 16:54:36
-->

<script>
//文档地址: https://xuliangzhan_admin.gitee.io/vxe-table/v2/index.html#/table/api
//github地址: https://github.com/xuliangzhan/vxe-table
// import request from "@/common/api/request";
import { renderColHandler, renderPaginationHandler ,renderElPaginationHandler} from "../CommonTable/js/renderHandler";
import methods from "./mixinx/methods";
export default {
  name: "commonTable",
  mixins: [methods],
  props: {
    canCtrlEditable: {
      type: Boolean,
      default: false
    },
    canMergeCells: {
      type: Boolean,
      default: false
    },
    canCtrlCheck: {
      type: Boolean,
      default: false
    },
    customValidRules: Object,  //校验规则配置项
    canEditMethod: [Function],
    editDisabledMethod: [Function],
    propsMergeCellsMethod: [Function],
    propsFooterMethod: [Function],
    propsFooterCellClass: [Function],
    propsCheckMethod: [Function],
    /* 分页 */
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 20
    },
  },
  data() {
    return {
      tableData: [],
      tableColumns: [],
      // opt: {
      //   url: "",
      //   param: {},
      //   params: { name: "", pageSize: 10, pageNumber: 1 }
      // },
      hasPage: true,
      loading: false,
      isLocalData: false,
      tableTotalList: null,
      selectType: "",
      tableOptDef: {
        border: 'full',
        stripe: true,  //是否带有斑马纹（需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式）
        resizable: true, //所有的列是否允许拖动列宽调整大小
        height: 500,
        emptyRender:{name: 'NotData'},
        align: "center",  //所有的列对齐方式
        headerAlign: "center", //所有的表头列的对齐方式
        footerAlign: "center", //所有的表尾列的对齐方式
        highlightCurrentRow: true, //是否要高亮当前行
        highlightHoverRow: true, //鼠标移到行是否要高亮显示
        seqConfig: {  //序号配置项
          seqMethod: this.seqMethod
        },
        radioConfig: { //单选框配置项
          checkMethod: this.checkMethod
        },
        // checkboxConfig: { //复选框配置项
        //   checkMethod: this.checkMethod
        // },
        // editConfig: { //可编辑配置项
        //   activeMethod: this.activeEditMethod  //该方法 Function({row, rowIndex, column, columnIndex}) 的返回值用来决定该单元格是否允许编辑
        // },
        // editRules: this.customValidRules,  //校验规则配置项
        // spanMethod: this.mergeCellsMethod, //自定义合并函数，返回计算后的值 (不能用于虚拟滚动、展开行，不建议用于固定列、树形结构)
        // footerMethod: this.footerMethod, //表尾的数据获取方法，返回一个二维数组
        // footerCellClassName: this.footerCellClassName  //给表尾的单元格附加 className
      },
      tableEvents: {},  //表事件
      columnOptDef: {  //表列默认参数
        minWidth: "80px"
      },
      // pageOptDef: {  /* TODO: 分页设置，需要修改为elementui-pager */
      //   currentPage: 0,
      //   pageCount: 0,
      //   total: 0,
      //   origPageSize: 10 // 记录原始 pageSize
      // },
      // miniPageDef: { /* TODO: 分页设置2，需要修改为elementui-pager */
      //   size: "mini",
      //   layouts: ["PrevPage", "Jump", "PageCount", "NextPage", "Sizes", "Total"]
      // }
      pageOptDef:{
        small:true,
        background:true,
        layout:'total, sizes, prev, pager, next, jumper',
        pageSizes:[10, 20, 30, 50],
        // total:100,
        // size-change:this.handleSizeChange,
        // current-change:"handleCurrentChange"
      },
      pageOptDefOn:{
        "size-change": this.handleSizeChange,
        "current-change": this.handleCurrentChange
      },
      // pageConfig:{
      //   currentPage:1,
      //   pageSize:20,
      // }
    };
  },
  mounted() {
    // TODO 设置默认 pageSize
    // let { pageSize } = this.$refs.pagination;
    // this.pageOptDef["pageSize"] = pageSize;
    // this.pageOptDef["origPageSize"] = pageSize;
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  methods: {
    handleSizeChange(pageSize){
       console.log(pageSize);
      // this.$set(this.pageConfig,"pageSize",pageSize)
      // console.log(this.pageConfig);
      // this.currentPage =1
      this.$emit("pagination", { page: this.currentPage, limit: pageSize })
    },
    handleCurrentChange(currentPage){
      this.$emit('pagination', { page: currentPage, limit: this.pageSize })
       console.log(currentPage);
      // this.$set(this.pageConfig,"currentPage",currentPage)
      //  console.log(this.pageConfig);
    },
    /**
     * @name: load
     * @description: 加载数据
     * @type: Function
     * @param {type}
     * @return {Promise}
     */
    load(url, param, pageNo, rowNum) {
      return new Promise((resolve, reject) => {
        this.isLocalData = false;
        let page_url = url;
        this.opt.url = page_url;
        if (!page_url.includes("?")) {
          page_url = page_url + "?";
        } else {
          page_url = page_url + "&";
        }
        if (pageNo) {
          this.opt.params.pageNumber = pageNo;
          page_url = page_url + "pageNumber=" + pageNo;
        } else {
          page_url = page_url + "pageNumber=1";
        }
        let pageSize = 0;
        if (this.hasPage) {
          if (rowNum) {
            this.opt.params.pageSize = rowNum;
          }
          pageSize = this.opt.params.pageSize;
        }
        page_url = page_url + "&pageSize=" + pageSize;
        this.opt.param = param;
        this.getTableRowsData(page_url, this.opt.param, resolve, reject);
      });
    },
    //获取表格数据
    getTableRowsData(url, param, resolve, reject) {
      this.loading = true;
      request({
        method: "post",
        url: url,
        data: param,
        hideLoading: true
      })
        .then(res => {
          if (res && res.list) {
            this.tableData = res.list; // 列表数据
            this.pageOptDef.pageCount = res.pages; //总页数
            this.pageOptDef.pageSize = res.pageSize; //每页几条
            this.pageOptDef.total = res.total; //总条数
            this.pageOptDef.currentPage = res.pageNum; // 当前页
          } else {
            this.tableData = [];
            this.pageOptDef.pageCount = 1; //总页数
            this.pageOptDef.pageSize = this.pageOptDef.origPageSize; //每页几条
            this.pageOptDef.total = 0; //总条数
            this.pageOptDef.currentPage = 1; // 当前页
          }
          this.loading = false;
          resolve(this.tableData);
        })
        .catch(err => {
          this.loading = false;
          reject(err);
        });
    },

    /**
     * @name: loadLocalData
     * @description: 渲染非 load 方法获取的数据，目前不支持 排序、筛选 等功能
     * @type: Function
     * @param {object | array} data: 渲染表格的数据，外部调用传入 Object {list: [...]}
     * @return {Promise}
     */
    loadLocalData(data = []) {
      this.loading = true;
      return new Promise((resolve, reject) => {
        this.tableData = data;


        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)

        // this.loading = false;
        resolve();

        // this.isLocalData = true;
        // if (Array.isArray(data)) {
        //   this.tableData = data;
        // } else {
        //   if (this.hasPage) {
        //     this.tableTotalList = data.list; // 保留总数据
        //     this.pageOptDef.currentPage = 1; // 当前页
        //     this.pageOptDef.total = data.list.length; // 总条数
        //     this.pageOptDef.pageCount =
        //       data.list.length % this.pageOptDef.pageSize == 0
        //         ? data.list.length / this.pageOptDef.pageSize
        //         : Math.floor(data.list.length / this.pageOptDef.pageSize) + 1; // 总页数

        //     this.tableData = data.list.slice(0, this.pageOptDef.pageSize);
        //   } else {
        //     this.tableData = data.list;
        //   }
        // }
        // resolve();
      });


      // return new Promise((resolve, reject) => {
      //   this.isLocalData = true;
      //   if (Array.isArray(data)) {
      //     this.tableData = data;
      //   } else {
      //     if (this.hasPage) {
      //       this.tableTotalList = data.list; // 保留总数据
      //       this.pageOptDef.currentPage = 1; // 当前页
      //       this.pageOptDef.total = data.list.length; // 总条数
      //       this.pageOptDef.pageCount =
      //         data.list.length % this.pageOptDef.pageSize == 0
      //           ? data.list.length / this.pageOptDef.pageSize
      //           : Math.floor(data.list.length / this.pageOptDef.pageSize) + 1; // 总页数

      //       this.tableData = data.list.slice(0, this.pageOptDef.pageSize);
      //     } else {
      //       this.tableData = data.list;
      //     }
      //   }
      //   resolve();
      // });
    },

    /**
     * @name: SetColumn
     * @description: 初始化表格列
     * @param {array} column: 列配置项
     * @param {object} tableOpt: 表格设置配置项
     */
    SetColumn(column = [], tableOpt = {}) {
      this.tableColumns = []; // 列数据置空

      this.tableColumns = column; 

      let { page, pageType, pageConfig, events, showIndex } = tableOpt;
      // if (page === false) {
      //   this.hasPage = false;
      // }
      // 简易分页器的快捷配置
      // if (pageType == "mini" || (pageConfig && pageConfig.small)) {
      //   // pageType == "mini" 为了兼容上个版本的封装
      //   Object.assign(this.pageOptDef, this.miniPageDef, pageConfig);
      // }
      // 翻页器自定义配置
      // if (pageConfig && !pageConfig.small) {
      //   Object.assign(this.pageOptDef, pageConfig);
      //   if (pageConfig.pageSize) {
      //     this.pageOptDef.origPageSize = pageConfig.pageSize;
      //   }
      // }
      if (events) {
        Object.assign(this.tableEvents, events);
      }
      // if (showIndex) {
      //   // 为了兼容上个版本的封装
      //   column.unshift({ type: "seq", width: "50", fixed: "left" });
      // }
      // Object.defineProperty(tableOpt, "page", { enumerable: false });
      // Object.defineProperty(tableOpt, "pageType", { enumerable: false });
      // Object.defineProperty(tableOpt, "pageConfig", { enumerable: false });
      Object.defineProperty(tableOpt, "events", { enumerable: false });

      Object.assign(this.tableOptDef, tableOpt);
      // column.forEach(item => {
      //   if (item.type && item.type == "selection") {
      //     item.type = "checkbox"; // 兼容[vxe-table]老版本
      //   }
      //   const column = Object.assign({}, this.columnOptDef, item);
      //   this.tableColumns.push(column);
      // });
      // this._getSelectType(this.tableColumns);
      // setTimeout(() => {
      //   this._scaleTable();
      // }, 0);
    },
    // vxe-pager 事件
    // pagerChange({ type, currentPage, pageSize, $event }) {
    //   if (type == "current") {
    //     // 翻页
    //     this.TablePagingFn(currentPage, pageSize);
    //   } else if (type == "size") {
    //     // 改变每页显示条目
    //     this.pageSizeChangeFn(pageSize);
    //   }
    // },
    //分页事件
    // TablePagingFn(pagingIndex, pageSize) {
    //   if (this.isLocalData) {
    //     // 本地分页
    //     this.pageOptDef.currentPage = pagingIndex;
    //     this.pageOptDef.pageSize = pageSize;
    //     let st = (pagingIndex - 1) * pageSize;
    //     let en = st + (pageSize - 0);
    //     let temp = this.tableTotalList.slice(st, en);
    //     this.loadLocalData(temp);
    //   } else {
    //     let opt = this.opt;
    //     opt.params.pageNumber = pagingIndex;
    //     //改变页数，请求数据
    //     this.load(opt.url, opt.param, pagingIndex);
    //   }
    // },
    // 改变每页展示条数回调事件
    // pageSizeChangeFn(val) {
    //   if (this.isLocalData) {
    //     // 本地分页
    //     this.pageOptDef.pageSize = val;
    //     this.pageOptDef.currentPage = 1;
    //     let st = 0;
    //     let en = val;
    //     this.pageOptDef.pageCount =
    //       this.tableTotalList.length % this.pageOptDef.pageSize == 0
    //         ? this.tableTotalList.length / this.pageOptDef.pageSize
    //         : Math.floor(
    //             this.tableTotalList.length / this.pageOptDef.pageSize
    //           ) + 1;
    //     let temp = this.tableTotalList.slice(st, en);
    //     this.loadLocalData(temp);
    //   } else {
    //     this.pageOptDef.pageSize = val;
    //     let opt = this.opt;
    //     opt.params.pageSize = val;
    //     opt.params.pageNumber = 1;
    //     this.load(opt.url, opt.param, 1, val);
    //   }
    // },

    /* --------------------- Events ---------------------- */

    // 行选择触发
    rowSelectCbk({
      records,
      reserves,
      indeterminates,
      checked,
      row,
      rowIndex,
      $rowIndex,
      column,
      columnIndex,
      $columnIndex,
      $event
    }) {
      // TODO: 验证 records, reserves, indeterminates 是什么
      this.$emit("selectsEvent", {
        reserves,
        row: row,
        rowIndex,
        $rowIndex,
        column,
        columnIndex,
        $columnIndex,
        selection: records,
        checked: checked
      });
    },
    // 全选触发
    selectAllCbk({ records, reserves, indeterminates, checked, $event }) {
      this.$emit("checkboxAll", {
        records,
        reserves,
        indeterminates,
        checked,
        $event
      });
    },
    // 单元格单击触发
    handleCellClick({
      row,
      rowIndex,
      $rowIndex,
      column,
      columnIndex,
      $columnIndex,
      triggerRadio,
      triggerCheckbox,
      $event
    }) {
      // TODO: 这里和之前返回的参数形式不同
      this.$emit("handleCellClick", {
        row,
        rowIndex,
        $rowIndex,
        column,
        columnIndex,
        $columnIndex,
        triggerRadio,
        triggerCheckbox,
        $event
      });
    },
    // 单元格双击触发
    handleCellDbClick({
      row,
      rowIndex,
      $rowIndex,
      column,
      columnIndex,
      $columnIndex,
      $event
    }) {
      this.$emit("handleCellDbClick", {
        row,
        rowIndex,
        $rowIndex,
        column,
        columnIndex,
        $columnIndex,
        $event
      });
    },
    // 单元格编辑状态被关闭时触发
    editClosedCbk({
      row,
      rowIndex,
      $rowIndex,
      column,
      columnIndex,
      $columnIndex
    }) {
      // 如果启用了表尾合计，单元格编辑失去焦点后更新表尾合计
      if (this.tableOptDef.showFooter) {
        this.$refs.editable.updateFooter();
      }
      this.$emit("handleBlurActive", {
        row,
        rowIndex,
        $rowIndex,
        column,
        columnIndex,
        $columnIndex
      });
    },
    // 是否允许编辑(行或者单元格),配合 editDisabledEvent 使用, 必须 prop 传入 canCtrlEditable
    activeEditMethod({ row, rowIndex, column, columnIndex }) {
      if (this.canCtrlEditable) {
        return this.canEditMethod({ row, rowIndex, column, columnIndex });
      } else {
        return true;
      }
    },
    // 不允许编辑的处理方法, 配合 activeEditMethod 使用, 必须 prop 传入 canCtrlEditable
    editDisabledEvent({ row, rowIndex, column, columnIndex }) {
      if (this.canCtrlEditable) {
        this.editDisabledMethod({ row, rowIndex, column, columnIndex });
      }
    },
    // 序号规则默认方法
    seqMethod({ $rowIndex, seq }) {
      // console.log('this.currentPagethis.currentPagethis.currentPage',this.currentPage);
      if (this.total && this.total > 0) {
        // console.log('this.currentPagethis.currentPagethis.currentPage',this.currentPage);
        const temp =
          (this.currentPage - 1) * this.pageSize;
        return temp + $rowIndex + 1;
      } else {
        return seq;
      }
    },
    // 是否可被选，配合 canCtrlCheck 使用
    checkMethod({ row }) {
      if (this.canCtrlCheck) {
        return this.propsCheckMethod({ row });
      } else {
        return true;
      }
    },
    // 排序触发
    sortChange({ column, property, order, $event }) {
      if (column.remoteSort === false) {
        // 当前列关闭了远程排序，前端排序
      } else {
        // 当前字段 property;  从小到大 order == "asc" 从大到小的 order == "desc" 没有时 null
        let name = property;
        name = name.replace(/([A-Z])/g, "_$1").toLowerCase();
        if (this.opt.url.includes("?")) {
          var index = this.opt.url.lastIndexOf("?");
          if (order != null) {
            this.opt.url =
              this.opt.url.substring(0, index) +
              "?orderBy=" +
              name +
              " " +
              order;
          } else {
            this.opt.url = this.opt.url.substring(0, index);
          }
        } else {
          if (order != null) {
            this.opt.url = this.opt.url + "?orderBy=" + name + " " + order;
          }
        }
        this.load(
          this.opt.url,
          this.opt.param,
          this.opt.params.pageNumber,
          this.opt.params.pageSize
        );
      }
    },
    // 筛选触发
    filterChange({ column, property, values, datas, filters, $event }) {
      // 筛选默认 非服务端
      if (
        this.tableOptDef.filterConfig &&
        this.tableOptDef.filterConfig.remote
      ) {
        // 开启远程筛选
        alert("启用服务端排序，尚未沟通传参方式");
      } else {
        // 前端筛选
      }
    },
    // 行、列 单元格合并，配合 canMergeCells 使用
    mergeCellsMethod({
      row,
      $rowIndex,
      rowIndex,
      column,
      $columnIndex,
      columnIndex,
      data
    }) {
      if (this.canMergeCells) {
        return this.propsMergeCellsMethod({
          row,
          $rowIndex,
          rowIndex,
          column,
          $columnIndex,
          columnIndex,
          data
        });
      }
    },
    // 表尾合计, 使用时初始化表格时配置 showFooter: true
    footerMethod({ columns, data }) {
      return this.propsFooterMethod({ columns, data });
    },
    footerCellClassName({ $rowIndex, column, columnIndex }) {
      return this.propsFooterCellClass({ $rowIndex, column, columnIndex });
    },

    /* --------------------- Methods ---------------------- */

    // 内部使用方法，判断 单选还是多选
    _getSelectType(columns) {
      const len = columns.length;
      for (let i = 0; i < len; i++) {
        let column = columns[i];
        if (column.type && column.type == "radio") {
          this.selectType = "radio";
          return;
        } else if (
          column.type &&
          (column.type == "selection" || column.type == "checkbox")
        ) {
          this.selectType = "checkbox";
          return;
        }
      }
    },
    // 内部使用方法，缩放表格
    // _scaleTable() {
    //   // TODO: print
    //   const editTableWrap = this.$refs.editable.$parent.$el;
    //   const innerTable = this.$refs.editable.$el;
    //   const innerTableBody = innerTable.getElementsByClassName(
    //     "vxe-table--body"
    //   )[0];
    //   if (this.$route.query["activePrint"]) {
    //     const innerTableW = innerTableBody.offsetWidth; //表格实际内容宽度
    //     const editTableWrapW = editTableWrap.offsetWidth; //表格wrap的宽度
    //     const table = this.$refs.editable.$el;
    //     table.style.width = innerTableW + "px";
    //     let scale = editTableWrapW / innerTableW;
    //     scale = scale < 1 ? scale : 1;
    //     table.style.transform = `scaleX(${scale})`;
    //     table.style.transformOrigin = "0 0";
    //     console.log(
    //       "wrap宽度" + editTableWrapW + "innertable宽度" + innerTableW
    //     );
    //   }
    // }
  },
  render(h) {
    return h("div", { class: "gridtable-wrap" }, [
      h(
        "vxe-grid",
        {
          class: "mytable-scrollbar",
          props: {
            data: this.tableData,
            loading: this.loading,
            columns: this.tableColumns,
            ...this.tableOptDef
          },
          on: {
            "current-change": this.rowSelectCbk,
            "radio-change": this.rowSelectCbk,
            "checkbox-change": this.rowSelectCbk,
            "checkbox-all": this.selectAllCbk,
            "cell-click": this.handleCellClick,
            "cell-dblclick": this.handleCellDbClick,
            "edit-closed": this.editClosedCbk,
            "edit-disabled": this.editDisabledEvent,
            "sort-change": this.sortChange,
            "filter-change": this.filterChange,
            ...this.tableEvents
          },
          scopedSlots: {
            // empty: () => {
            //   return (
            //     <span style={"color: #999;font-size: 14px;"}>
            //       {this.$i18n.t("appCommon.noData")}
            //     </span>
            //   );
            // }
            // toolbar_tools: () => {
            //   return (
            //     <vxe-input placeholder="搜索222"></vxe-input>
            //   );
            // },
            // toolbar_tools2: () => {
            //   return (
            //     <vxe-input placeholder="天兵宝宝"></vxe-input>
            //   );
            // }
          },
          ref: "xGrid"
        },
        // renderColHandler(h, this.tableColumns)
      ),
      // h(
      //   "div",
      //   {
      //     class:"pagination-container",
      //     style:{
      //       display:(this.total === 0)?"none":"block"
      //     }
      //   },
      //   [
      //     h(
      //       "el-pagination",
      //       {
      //         style:"text-align:right",
      //         props: {
      //           ...this.pageOptDef,
      //           ...{
      //             currentPage:this.currentPage,
      //             pageSize:this.pageSize,
      //             total:this.total
      //           },
      //         },
      //         on: {
      //           ...this.pageOptDefOn,
      //           // "update:current-page":val => this.currentPage = val,
      //           // "update:page-size":val => this.pageSize = val
      //         },
      //       },
      //     )
      //   ]
      // ),
      renderElPaginationHandler(
        h,
        this.pageOptDef,
        {
          currentPage:this.currentPage,
          pageSize:this.pageSize,
          total:this.total
        },
        this.pageOptDefOn
      )


      // renderPaginationHandler(
      //   h,
      //   this.pageOptDef,
      //   this.hasPage,
      //   this.pagerChange
      // )


    ]);
  }
};
</script>
<style lang="scss" scoped>
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
  background-color: #FFFFFF;
}

/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: #bfbfbf;
  border-radius: 5px;
  border: 1px solid #F1F1F1;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: #A8A8A8;
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: #787878;
}

/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
}


.mytable-scrollbar .alert-message {
          height: 40px;
          display: flex;
          align-items: center;
          margin: 10px 0;
          border-radius: 4px;
          background-color: #e6f7ff;
          border: 1px solid #91d5ff;
        }
        .mytable-scrollbar .alert-message-icon {
          width: 30px;
          text-align: center;
          color: #409eff;
          margin-right: 8px;
        }
        .mytable-scrollbar .alert-message-content {
          flex-grow: 1;
          padding-right: 20px;
        }
        .mytable-scrollbar .page-left {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 10;
        }
        .mytable-scrollbar .select-count {
          display: inline-block;
          vertical-align: middle;
        }
        .mytable-scrollbar .my-input {
          width: 100%;
        }
        .mytable-scrollbar .first-col {
          position: relative;
          height: 20px;
        }
        .mytable-scrollbar .first-col:before {
          content: "";
          position: absolute;
          left: -15px;
          top: 10px;
          width: 110px;
          height: 1px;
          transform: rotate(28deg);
          background-color: #e8eaec;
        }
        .mytable-scrollbar .first-col .first-col-top {
          position: absolute;
          right: 4px;
          top: -10px;
        }
        .mytable-scrollbar .first-col .first-col-bottom {
          position: absolute;
          left: 4px;
          bottom: -10px;
        }

</style>
